<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="m-md p-b-md">
			<view class="flex flex-column m-b-md ">
				<text class="m-t-md m-b-sm">{{configInfo.app_name}}注销账号规则</text>
				<view class="text-warning">
					<text class="text-xs">
						温馨提示，账号注销申请一旦成功，您在平台的所有权益（包括但不限于会员、{{configInfo.money_company}}、{{configInfo.integral_company}}）都一并失效且无法恢复。若您已经确定好需要注销账号，请阅读下述须知后选择提交注销：
					</text>
				</view>
			</view>
			<view v-if="configInfo.cancel_account_rule" class="text-sm rule-list">
				<mp-html  :content="configInfo.cancel_account_rule"></mp-html>
			</view>
		</view>
		<view class="p-t-md">
			<view class="flex-center m-b-md text-sm">
				<u-checkbox-group shape="circle" @change="readAgree = !readAgree">
				    <u-checkbox name="agree" activeColor="#ff5e00" label="已阅读并了解上述规则" labelSize="26rpx">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<u-button
				shape="circle" 
				:color="configInfo.mainColor" 
				:style="{'width':'50%', 'color':'#555','box-shadow': '0 5px 10px 0 #00000010'}" 
				text="申请注销"  
				@click="submitCancel" 
				:disabled="submitDisabled"
			>
			</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				readAgree: false,
				submitDisabled: true
			}
		},
		watch:{
			readAgree(newVal, oldVal){
				this.submitDisabled = oldVal
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
		methods: {
			async submitCancel(){
				let res = await this.$api.user.cancelAccount({});
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,()=>{
						thos.$util.clearCache(true)
						uni.switchTab({
							url: '/pages/my/my'
						})
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
	.rule-list{
		line-height: 45rpx;
	}
	.rule-card{
		
	}
</style>
